<template>
  <el-dialog
    :title="titleMap[mode]"
    v-model="visible"
    width="25%"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      :disabled="mode == 'show'"
      ref="dialogForm"
      label-width="100px"
      label-position="right"
      class="noFlex"
    >
      <el-form-item label="岗位名称" prop="name">
        <el-input v-model="form.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="岗位类型" prop="managementState">
        <el-select
          v-model="form.managementState"
          filterable
          clearable
          style="width: 100%"
          placeholder="请选择岗位类型"
        >
          <el-option
            v-for="item in managementStateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属部门" prop="depts">
        <el-cascader
          v-model="form.depts"
          :options="depts"
          :props="deptsProps"
          clearable
          style="width: 100%"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <!-- 0禁用1启用 -->
        <el-switch v-model="form.state" :inactive-value="0" :active-value="1" />
      </el-form-item>
      <el-form-item label="排序" style="width: 50%">
        <el-input-number
          v-model="form.sort"
          controls-position="right"
          :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" clearable type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        v-if="mode != 'show'"
        type="primary"
        :loading="isSaveing"
        @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ['success', 'closed'],
  data () {
    return {
      userId: '',//登录时的用户ID
      mode: "add",
      titleMap: {
        add: '新增',
        edit: '编辑',
        show: '查看'
      },
      visible: false,
      isSaveing: false,
      //表单数据
      form: {
        departmentId: '',
        name: '',
        managementState: 2,//类型
        state: 1,//状态
        remark: '',//备注
        sort: 0,//配置
        depts: [],
      },
      depts: [],
      managementStateOptions: [
        {
          value: 1,
          label: '直接主管'
        },
        {
          value: 2,
          label: '普通员工'
        },
        {
          value: 3,
          label: '其他管理类岗位'
        }
      ],
      //验证规则
      rules: {
        name: [
          { required: true, message: '请输入部门名称' }
        ],
        managementState: [
          { required: true, message: '请选择岗位类型', trigger: 'change' }
        ],
        depts: [
          { required: true, message: '请选择所属部门' }
        ],
      },
      deptsProps: {
        value: "id",
        label: 'name',
        checkStrictly: true
      },
    }
  },
  mounted () {
    this.getDept()
  },
  methods: {
    // 获取部门列表
    async getDept () {
      var res = await this.$API.department.getDepartmentList.get()
      this.depts = res.data
    },
    //显示
    open (mode = 'add') {
      this.mode = mode
      this.visible = true
      // let userInfo = this.$TOOL.data.get('USER_INFO')
      // this.form.departmentId = userInfo.departmentId
      // this.form.adminId = userInfo.userId
      return this
    },
    //表单提交方法
    submit () {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          let res = null
          console.log(this.form)
          this.form.departmentId = this.form.depts[0]
          delete this.form.depts
          if (this.mode == 'add') {
            res = await this.$API.position.addPositon.post(this.form)

          } else if (this.mode == 'edit') {
            delete this.form.createTime
            delete this.form.updateTime
            res = await this.$API.position.updatePositon.post(this.form)
          }

          this.isSaveing = false
          if (res.code == 200) {
            this.$emit('success', this.form, this.mode)
            this.visible = false
            this.$message.success("操作成功")
          } 
        } else {
          return false
        }
      })
    },
    //表单注入数据
    setData (data) {
      this.form = data
      let list = []
      list.push(data.departmentId)
      this.form.depts = list
    },
  }
}
</script>

<style scoped>
:deep(.avatar-uploader) .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
:deep(.avatar-uploader) .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
